<template>
  <div id="externalSharing">
    <div class="t1">
      <div v-if="isAll"></div>
      <div v-if="!isAll" class="actionBar">
        <div :class="{ active: isDownload }">
          <img
            :src="
              isDownload
                ? require('@/assets/29.png')
                : require('@/assets/30.png')
            "
          />下载
        </div>
      </div>
      <div class="right" v-if="!allFiles">
        <div>
          <img
            @click="
              type1 = true;
              type2 = false;
            "
            :src="
              type1 ? require('@/assets/c2.png') : require('@/assets/c1.png')
            "
            alt=""
          />
        </div>
        <div>
          <img
            @click="
              type1 = false;
              type2 = false;
            "
            :src="
              type1 ? require('@/assets/c3.png') : require('@/assets/c4.png')
            "
            alt=""
          />
        </div>
        <div class="filt">
          <img
            @click="type2 = !type2"
            :src="
              type2 ? require('@/assets/c6.png') : require('@/assets/c5.png')
            "
            alt=""
          />
          <div v-if="type2">
            <p
              v-for="(item, idx) in arr1"
              :key="idx"
              @click="
                type3 = item.type;
                type2 = false;
              "
              :class="type3 == item.type ? 'active' : ''"
            >
              {{ item.name }}
            </p>
            <p
              v-for="item in arr2"
              :key="item.type"
              @click="
                type4 = item.type;
                type2 = false;
              "
              :type4="type4 == item.type ? 'active' : ''"
            >
              {{ item.name }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="t2">
      <div class="t3">
        <img
          @click="allFiles = false"
          :src="
            !allFiles ? require('@/assets/15.png') : require('@/assets/17.png')
          "
        />
        <img
          @click="allFiles = true"
          :src="
            allFiles ? require('@/assets/14.png') : require('@/assets/18.png')
          "
        />
        <img src="~@/assets/16.png" alt="" />
      </div>

      <a-breadcrumb separator=">">
        <a-breadcrumb-item href="">文件</a-breadcrumb-item>
        <a-breadcrumb-item
          href=""
          @click.native="allFiles = false"
          v-if="allFiles"
          >我的共享</a-breadcrumb-item
        >
        <a-breadcrumb-item v-else>我的共享</a-breadcrumb-item>
        <a-breadcrumb-item v-if="allFiles">文件夹第二级</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="t4">
      <div class="t6" v-if="type1">
        <div>
          <img
            @click="isAll = !isAll"
            :src="
              isAll
                ? require('@/assets/duoxuan1@1x.png')
                : require('@/assets/duoxuan2@1x.png')
            "
            alt=""
          />
          文件名
        </div>
        <div>
          <div>文件类型</div>
          <div>文件大小</div>
          <div>修改日期</div>
        </div>
      </div>
      <!-- 列表 -->
      <div class="list" v-if="type1">
        <div
          class="t7"
          v-for="(item, idx) in 7"
          :key="idx"
          @click="idx < 4 ? '' : (allFiles = true)"
        >
          <div>
            <div>
              <img
                @click.stop
                class="actIcon"
                :src="
                  !item.active
                    ? require('@/assets/duoxuan1@1x.png')
                    : require('@/assets/duoxuan2@1x.png')
                "
                alt=""
              />
            </div>
            <div class="t8">
              <p>
                <el-image
                  v-if="idx < 4 || allFiles"
                  class="listImg"
                  :src="url"
                  :preview-src-list="srcList"
                >
                </el-image>
                <img v-else class="listImg" src="@/assets/md-folder@1x.png" />
              </p>
              <p v-if="idx < 4 || allFiles">
                图片名称图片名称图片名称.......图片名称.jpg
              </p>
              <p v-else>只读共享指定用户</p>
            </div>
          </div>
          <div>
            <div>图片</div>
            <div>9.8MB</div>
            <div>2023-03-16 21:56:03</div>
          </div>
        </div>

        <div class="t7" v-if="addFolders">
          <div>
            <div>
              <img
                class="actIcon"
                :src="
                  !isAll
                    ? require('@/assets/duoxuan1@1x.png')
                    : require('@/assets/duoxuan2@1x.png')
                "
                alt=""
              />
            </div>
            <div class="t8">
              <p>
                <img class="listImg" src="@/assets/md-folder@1x.png" />
              </p>
              <p>
                <input placeholder="请输入文件夹名称" />
              </p>
            </div>
          </div>
          <div>
            <div>文件夹</div>
            <div></div>
            <div>2023-03-16 21:56:03</div>
          </div>
        </div>
      </div>
      <!-- 宮格 -->
      <div class="list2" v-else>
        <div class="t7" v-for="(item, idx) in 14" :key="idx">
          <div>
            <div>
              <img
                class="actIcon"
                @click="item.active = !item.active"
                :src="
                  !item.active
                    ? require('@/assets/7.png')
                    : require('@/assets/6.png')
                "
                alt=""
              />
            </div>
            <div class="t8">
              <p>
                <el-image
                  class="listImg"
                  :src="url"
                  :preview-src-list="srcList"
                >
                </el-image>
              </p>
              <p class="title">文件夹名称</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 删除 -->
    <el-dialog
      title="退出共享"
      :visible.sync="dialogVisibleDelete"
      width="500px"
      :before-close="
        () => {
          dialogVisibleDelete = false;
          isDelete = false;
        }
      "
    >
      <span>您确要从xxx文件夹，xxx文件夹退出共享</span>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            dialogVisibleDelete = false;
            isDelete = false;
          "
          >取消</el-button
        >
        <el-button
          @click="
            dialogVisibleDelete = false;
            isDelete = false;
          "
          type="primary"
          >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAll: true,
      isAll2: false,
      // 新建文件夾
      addFolders: false,
      // 二級界面
      allFiles: false,

      dialogVisibleDelete: false,
      isDelete: false,
      isCopy: false,
      isRename: false,
      isDownload: false,

      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
      arr1: [
        {
          type: 1,
          name: "按文件名a-z",
        },
        {
          type: 2,
          name: "按修改日期",
        },
        {
          type: 3,
          name: "按文件大小",
        },
      ],
      arr2: [
        {
          type: 4,
          name: "正序",
        },
        {
          type: 5,
          name: "倒序",
        },
      ],
      type1: true,
      type2: false,
      type3: -1,
      type4: -1,
    };
  },
  components: {},
  comments: {},
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.t1 {
  background: #fff;
  padding: 13px 30px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
  justify-content: space-between;
  height: 72px;

  img {
    width: 16px;
    margin-right: 6px;
    vertical-align: middle;
  }
  .right {
    display: flex;
    img {
      width: 35px;

      cursor: pointer;
      height: 35px;
      margin-right: 20px;
    }
    .filt {
      position: relative;
      div {
        width: 120px;
        position: absolute;
        cursor: pointer;
        left: -50px;
        text-align: left;
        line-height: 20px;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(238, 244, 249, 1);
        padding: 10px 0;
        z-index: 1;
        p {
          color: rgba(16, 16, 16, 1);
          font-size: 12px;
          height: 30px;
          line-height: 30px;
          padding-left: 10px;
        }
        p:hover {
          background-color: rgba(238, 244, 249, 1);
          cursor: pointer;
          color: #2f7df9;
        }
        .active {
          background: rgba(238, 244, 249, 1) url("~@/assets/7.png") no-repeat
            right 10px center;
          background-size: 12px 12px;
          cursor: pointer;
          color: #2f7df9;
        }
      }
    }
  }

  .actionBar {
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    display: flex;
    > div {
      display: flex;
      align-items: center;
      cursor: pointer;
      margin-right: 30px;
    }
    img {
      width: 22px;
      height: 22px;
      margin-right: 10px;
      vertical-align: middle;
    }
    .active {
      color: rgba(47, 125, 249, 1);
    }
  }
  .btn {
    margin-right: 20px;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
    width: 120px;
    height: 45px;
    border-radius: 5px;
  }
  .btn2 {
    height: 45px;
    border-radius: 5px;
    color: #2f7df9;
    font-size: 14px;
    border: 1px solid #2f7df9;
    text-align: center;
  }
}
.t2 {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 20px 30px;
  .t3 {
    margin-right: 30px;
    img {
      margin-right: 20px;
      cursor: pointer;
    }
  }
}
.t4 {
  background: #fff;
  text-align: left;
  .t5 {
    color: rgba(16, 16, 16, 1);
    font-size: 16px;
    cursor: pointer;
    padding: 20px;
    font-weight: bold;
    img {
      margin-right: 6px;
      width: 16px;
    }
  }
  .t6 {
    display: flex;
    justify-content: space-between;
    height: 70px;
    line-height: 70px;
    > div:nth-child(1) {
      width: 50%;
      padding-left: 20px;
      cursor: pointer;
      img {
        margin-right: 14px;
      }
    }
    > div:nth-child(2) {
      width: 40%;
      display: flex;
      text-align: center;

      > div {
        width: 33.3%;
      }
    }
  }
  .list {
    > div:hover {
      cursor: pointer;
      background: #ebf1ff;
      transition: all 0.5s;
    }
    .t7 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;

      > div:nth-child(1) {
        width: 50%;
        padding-left: 20px;

        display: flex;
        align-items: center;
        .t8 {
          display: flex;
          align-items: center;
          input {
            width: 418px;
            height: 36px;
            background-color: rgba(238, 244, 249, 1);
            color: rgba(136, 136, 136, 1);
            font-size: 14px;
            border: 0;
            padding-left: 6px;
          }
        }
        .listImg {
          width: 50px;
          height: 50px;
          border-radius: 5px;
          margin-right: 10px;
        }
      }
      > div:nth-child(2n) {
        width: 40%;
        display: flex;
        text-align: center;
        align-items: center;

        > div {
          width: 33.3%;
        }
      }
      .actIcon {
        margin-right: 16px;
        width: 16px;
      }
    }
  }
  .list2 {
    padding: 0 20px;
    padding-right: 0;
    display: flex;
    flex-wrap: wrap;
    > div {
      height: 200px;
      cursor: pointer;
      width: 170px;
      margin-right: 50px;
      line-height: 20px;
      border-radius: 10px;
      background-color: rgba(245, 248, 255, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 14px;
      text-align: center;
      margin-bottom: 10px;
      position: relative;
      > div {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        .title {
          color: rgba(16, 16, 16, 1);
          font-size: 14px;
          margin-top: 14px;
        }
      }
      .actIcon {
        position: absolute;
        left: 12px;
        top: 12px;
      }
      .listImg {
        width: 80px;
        height: 80px;
      }
    }
  }
}
</style>
